<!DOCTYPE html>
<html lang="en">
<head>
    <title>动态发布系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="UTF-8">
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="icon" href="image/icon/favicon.ico">
    <style>
        .picCon{
            overflow: hidden;       /*防止div被图片撑大*/
        }
    </style>
</head>
<body>
<div  class="container" style="width: 100%">
    <div class="row clearfix">
        <div class="col-sm-12 column">
            <ul class="nav nav-tabs">
                <li>
                    <a href="./index.html">首页</a>
                </li>
                <li  class="active">
                    <a href="./find.html">朋友圈</a>
                </li>
                <li>
                    <a href="./message.html" id="nrmes">消息</a>
                </li>
                <li >
                    <a href="./square.html" >广场</a>
                </li>
            </ul>
        </div>
    </div>
</div>
<div class="container" style="min-height: 325px;background-color: #F5F5F5">
    <div class="row clearfix" >
        <div class="col-sm-12 column" style="background-color: #F5F5F5">
            <div id="dynamic" style="visibility: hidden" class="row clearfix" >

            </div>
            <div>
                <ul id="page" class="pagination">

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- pModal -->
<div class="modal fade" id="pModal" tabihndex="-1" role="dialog" aria-labelledby="pModalLabel">
    <div  class="modal-dialog" role="document">
        <div align="center" style="border-radius: 15px;" class="modal-content" data-dismiss="modal">
            <img id="modelimg" src="image/hg.jpg" style="max-width: 100%;border-radius: 15px;">
        </div>
    </div>
</div>
</body>
<script>
    function modalimg(val){
        $('#modelimg').attr('src',val)
        $('#pModal').modal('show')
    }
    function bb(){
        var height=0;
        $("div[name='divpic']").each(
            function(){
                if(height==0)
                    height=parseInt($(this).width()*0.8);
                $(this).height(height)
            })
        $("input[name='pic']").each(
            function(){
                var w=$(this).width();
                var h=$(this).height()
                if(h>w*0.8)
                {
                    $(this).width('100%')
                }
                else $(this).height('100%')
            })
        document.getElementById("dynamic").style.visibility= "visible"
    }
    function bian(){
        setTimeout("bb()",300)
    }
    window.onresize = function(){
        bian()
    }
    var qian="/moments"
    var page=0;
    var totalpage;
    $(function () {
        $.ajax({
            url:qian+"/loginInfo",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            async: false,
            success:function (data){
                if(data.code==200)
                {
                    var user=data.obj
                    if(user.nrmes!=0)
                    {
                        $("#nrmes").html("<span class=\"badge pull-right\">"+user.nrmes+"</span>消息")
                    }
                    gettotal();
                    getdynamic(0)
                }
                else window.location.href="./login.html"
            },
            error:function (data){
                window.location.href="./login.html"
            }
        })
    })
    function gettotal() {
        $.ajax({
            url: qian+"/find/gettotal",
            headers: {
                'Authorization': localStorage.getItem('token')
            },
            async: false,
            success: function (data) {
                var total = data.obj;
                totalpage = parseInt(total / 5) + (total % 5 === 0 ? 0 : 1);
                var html = "                    <li onclick='fanye(" + (-1) + ")'>\n" +
                    "                        <a href=\"#\">Prev</a>\n" +
                    "                    </li>"
                for (var i = 1; i <= totalpage; i++) {
                    html += "                    <li onclick='fanye(" + (i - 1) + ")'>\n" +
                        "                       <a href=\"#\"> " + i + "</a>\n" +
                        "                    </li>"
                }
                html += "                    <li onclick='fanye(" + (-2) + ")'>\n" +
                    "                        <a href=\"#\">Next</a>\n" +
                    "                    </li>"
                $('#page').html(html)
            }
        })
    }
    function fanye(val){
        if(val>=0){
            page=val;
        }
        else if(val===-1)
        {
            page--;
            page=Math.max(0,page);
        }
        else {
            page++;
            page=Math.min(page=Math.min(page,totalpage-1))
        }
        getdynamic(page)
    }
    function getdynamic(page){
        document.getElementById("dynamic").style.visibility= "hidden"
        $.ajax({
            url:qian+"/find/getfindfynamic",
            data:{
              page:page
            },
            async: false,
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    if(data.code==200)
                    {
                        var html="";
                        if(data.obj.length==0)
                        {
                            $("#page").html("")
                        }
                        for(var j=0;j<data.obj.length;j++) {
                            if (data.obj.length <= j) {
                                $("#dynamic" + j).html("")
                                continue;
                            }
                            html+="                <div  id=\"dynamic"+j+"\"  style=\"background-color: #ffffff;border-radius: 20px;width: 98%;margin: 1%\"  class=\"col-md-12 column\" >\n" +
                                "                                <div style=\"padding: 5px\">\n" +
                                "                                    <img onclick='visitor("+data.obj[j].userid+")' id=\"headphoto"+j+"\" style=\"cursor: pointer;width: 50px;height: 50px;border-radius: 30px\" src=\"image/hg.jpg\">&nbsp;<label id=\"username"+j+"\">作者</label>\n" +
                                "                                </div>\n" +
                                "                                <div id=\"iszhuan"+j+"\" style=\"padding: 10px\">\n" +
                                "                                    <em class=\"glyphicon glyphicon-share-alt\"></em>&nbsp;<a href=\"#\"> @小帅啦</a>\n" +
                                "                                </div>\n" +
                                "                                <p id=\"text"+j+"\"></p>\n" +
                                "                                <div style='width: 60%' id=\"image"+j+"\"></div>\n" +
                                "                                <div  style='clear: both'></div>\n" +
                                "                                <p><a class=\"btn\" href=\"./details.html?dyid="+data.obj[j].id+"\">View details »</a><label id=\"time"+j+"\" style=\"color: darkgray;font-size: 10px\"> 2021-2-8</label></p>\n" +
                                "                                <div class=\"btn-group\" style=\"width: 100%\">\n" +
                                "                                    <button id=\"zanbtn"+j+"\" style=\"width: 50%\" onclick='dianzan(this.value,"+data.obj[j].userid+",\""+data.obj[j].title+"\","+j+")' class=\"btn btn-default\" type=\"button\"><em class=\"glyphicon glyphicon-heart\">&nbsp</em><span id=\"zan"+j+"\" ></span></button>\n" +
                                "                                    <button id=\"zhuanbtn"+j+"\" style=\"width: 50%\" onclick='zhuanfa(this.value)' class=\"btn btn-default\" type=\"button\"><em class=\"glyphicon glyphicon-share-alt\">&nbsp</em><span id=\"zhuan"+j+"\" ></span></button>\n" +
                                "                                </div>\n" +
                                "                </div>"
                        }
                        $("#dynamic").html(html)
                        for(var j=0;j<data.obj.length;j++)
                        {
                            if(data.obj.length<=j)
                            {
                                $("#dynamic"+j).html("")
                                continue;
                            }
                            var obj=data.obj[j];
                            $("#"+"text"+j).html(obj.text);
                            $("#"+"zan"+j).html(obj.zan);
                            $("#"+"zanbtn"+j).val(obj.id);
                            $("#"+"zhuan"+j).html(obj.zhuan);
                            $("#"+"zhuanbtn"+j).val(obj.dyid);
                            $("#"+"time"+j).html(obj.time);
                            $("#"+"username"+j).html(obj.username);
                            $("#"+"headphoto"+j).attr('src',obj.headphoto);
                            if(obj.iszan)
                            {
                                $("#"+"zanbtn"+j).css("color","#FF8200");
                            }
                            if(obj.image!="")
                            {
                                var images=obj.image.split(",");
                                var html="<div align='left'  >"
                                for(var i=0;i<images.length;i++)
                                {
                                    html+="<div onclick='modalimg(\""+images[i]+"\")' name='divpic' style='width: 33%;float: left;border-radius: 10px;'  class='picCon '><input type='image' name='pic' style=\"margin: 1px;\" src=\""+images[i]+"\"></div>"
                                }
                                html+= "</div>\n";
                                $("#"+"image"+j).html(html);
                            }

                            var html="";
                            if(obj.iszhuan)
                            {
                                html+="<em class=\"glyphicon glyphicon-share-alt\"></em>&nbsp;<a onclick='visitor("+obj.dyuserid+")'>@"+obj.realname+"</a>"
                            }
                            $("#"+"iszhuan"+j).html(html);
                            bian()
                        }
                    }
                    else window.location.href="./login.html"
                }
                else window.location.href="./login.html"
            }
        })
    }
    function dianzan(dyid,userid,dyname,j){
        $.ajax({
            url:qian+"/zan/dianzan",
            data:{
                'dyid': dyid,
                'userid': userid,
                'dyname': dyname,
            },
            type:"put",
            async: false,
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            success:function (data){
                if(data.code==200)
                {
                    if(data.obj)
                    {
                        $("#"+"zanbtn"+j).css("color","#FF8200");
                        $("#"+"zan"+j).html(parseInt($("#"+"zan"+j).html())+1);
                    }
                    else {
                        $("#"+"zanbtn"+j).css("color","#333333");
                        $("#"+"zan"+j).html(parseInt($("#"+"zan"+j).html())-1);
                    }
                }
            }
        })
    }
    function zhuanfa(dyid){
        $.ajax({
            url:qian+"/zan/zhuanfa",
            data:{
                'dyid': dyid,
            },
            type: "post",
            headers:{
                'Authorization':localStorage.getItem('token')
            },
            async: false,
            success:function (data){
                if(data.code==200)
                {
                    window.location.reload()
                }
            }
        })
    }
    function visitor(vid){
        if(vid==localStorage.getItem('id'))window.location.href="./index.html";
        window.location.href="./visitor.html?vid="+vid+"";
    }
</script>
</html>